<template>
  <div class="comp-new">
    <el-form ref="newForm" :model="newForm" :label-width="150 + 'px'">
      <el-form-item
        label="图纸分类："
        prop="type"
        :rules="[
          { required: true, message: '请选择图纸分类', trigger: 'change' },
        ]"
      >
        <el-select v-model="newForm.type" placeholder="请选择" clearable>
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, key) in typeList"
            :key="key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="图纸名称："
        prop="name"
        :rules="[
          { required: true, message: '请输入图纸名称', trigger: 'change' },
        ]"
      >
        <el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
      </el-form-item>
      <el-form-item
        label="相关附件："
        prop="filePath"
        :rules="[{ required: true, message: '请上传附件', trigger: 'change' }]"
      >
        <el-upload
          class="upload-file"
          :action="config.uploadUrl"
          :file-list="fileList"
          :limit="1"
          accept="image/*"
          :on-success="handleUploadSuccess"
          :data="{ token: siteInfos.token }"
          :on-remove="handleRemove"
          :disabled="!$store.getters.hasEditPermission"
        >
          <el-button size="small" type="green">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "PlanNew",
  props: {
    activeData: {
      type: Object,
      default() {
        return null;
      },
    },
    typeList: {
      type: Array,
      default() {
        return [];
      },
    },
    businessId: {
      type: String,
      default: "",
    },
  },
  computed: {
    ...mapState(["siteInfos"]),
  },
  watch: {
    activeData() {
      this.initForm();
    },
  },
  data() {
    return {
      newForm: {
        filePath: "",
        fileName: "",
      },
      loading: false,
      fileList: [],
    };
  },
  methods: {
    initForm() {
      if (this.activeData) {
        this.newForm = this.utils.pick(this.activeData, [
          "id",
          "name",
          "type",
          "filePath",
          "fileName",
        ]);
        this.fileList.push({
          name: this.activeData.fileName,
          url: this.activeData.filePath,
        });
      } else {
        this.newForm = {};
        if (this.$refs["newForm"]) {
          this.$refs["newForm"].resetFields();
        }
      }
    },
    handleUploadSuccess(res, file) {
      this.newForm.filePath = res.data.filePath;
      this.newForm.fileName = res.data.fileName;
      this.fileList = [];
      this.fileList.push({ name: res.data.fileName, url: res.data.filePath });
      this.$refs.newForm.validateField("filePath");
    },
    handleRemove(file, fileList) {
      this.newForm.filePath = "";
      this.newForm.fileName = "";
      this.$refs.newForm.validateField("filePath");
    },
    submitAction() {
      this.$refs["newForm"].validate((valid) => {
        if (valid) {
          this.$emit("submitting");
          this.loading = true;
          let params = Object.assign(
            { businessId: this.businessId },
            this.newForm
          );
          let url = "";
          if (params.id) {
            url = "/business/firefightingplan/firefightingplanUpdate";
          } else {
            url = "/business/firefightingplan/firefightingplanAdd";
          }
          this.$ajax({
            url: url,
            method: "post",
            data: params,
          }).then(
            (data) => {
              this.loading = false;
              this.$message({
                type: "success",
                message: "保存成功",
                center: true,
              });
              this.$emit("success", data);
            },
            (error) => {
              this.loading = false;
              this.$emit("fail");
              this.$message.error(error.msg);
            }
          );
        } else {
          return false;
        }
      });
    },
  },
  created() {
    this.initForm();
  },
};
</script>
